學會了在 HTML 新增內容之後，就可以接著學習如何運用之前學到的 for 迴圈，把資料撈取出來後渲染到網頁了。今天的筆記將會以範例程式碼為主體，介紹如何將資料渲染到網頁上。

假如我有一個 h1，h1 底下有一個空的 ul（.list），任務是帶出所有農夫的名字並插入 .list 中。

// HTML
<h1>
  <ul class="list"></ul>
</h1>

// JS
// 建立陣列儲存資料
var farms = [
{
farmer: '卡斯伯',
dogs: ['張姆士', '龐的'],
},
{
farmer: '查理',
dogs: ['皮皮'],
}
];

// 選取要編輯的 DOM 元素
var el = document.querySelector('.list');
// 儲存陣列資料的總筆數
var farmLen = farms.length;
// 建立一個空字串
var str = '';
// 跑 for 迴圈
for(var i = 0 ; i < farmLen ; i++){
  // 要插入的字串
  var content = '<li>'+ farms[i].farmer +'</li>';
  str += content;
}
el.innerHTML = str;

程式碼說明：

1. 不能在迴圈中直接寫 el.innerHTML = content，因為 innerHTML 的特點是每次都會刪光原本的資料再覆蓋上去，以致於會把每次迴圈跑出來的結果給洗掉，只剩最後一個跑出來的結果。
2. += 是累加的意思，代表每一次迴圈跑出來的結果都會被存入變數 str 中。
3. 在迴圈跑完之後，才可以在迴圈外使用 innerHTML 把 str 的結果插入到 .list 中。

str += content 的意義

str += content 展開來就等於 str = str + content，整行程式碼用白話文來說就是「原變數 =（重新賦予值）原變數內容 + 新字串」。
舉例來說，當我們寫 var str= 'hello' 時，裡面就被賦予字串，而若我們有內容要加上去又不要影響原本的字串，那就可以派上用場。

另外，我曾問六角學院助教為何需要宣告空字串，助教回答說，宣告 var str = "" 最主要的目的是要清空字串，讓後來寫入 HTML 的字串不會混雜舊的字串結構。這是為了每次更新列表內容時，需要有個空字串來先儲存我們要組成的列表，之後將字串內容再寫入 HTML 裡面，如果不使用空字串，可能會連之前的內容一併又再重複組了。

不過其實我沒有很能參透助教的說法，空字串的用途不是用來累加內容的嗎？為什麼又有清空的功能哩？如果有邦友能解答的話，歡迎留言告訴我 :D